<template>
    <div>
        <Row :gutter="10">
            <Col span="18" offset="3">
            <Card class="slideList">
                <p slot="title" style="height: 32px">
                    <Icon type="ios-albums-outline"></Icon>
                    广告位列表
                    <Button type="success" @click="addAdvertisement">添加广告位</Button>
                </p>
                <div class="edittable-table-height-con">
                    <Table :columns="slideTableHead" :data="advertisementList" border :no-filtered-data-text="tipeNews" :no-data-text="tipeNews" ref="slideTableHead"></Table>
                </div>
            </Card>
            </Col>
        </Row>

        <Modal v-model="advertisementVatis" title="修改/添加广告位" @on-ok="handleSubmit('advertisementModel')" @on-cancel="handleReset('advertisementModel')">
            <Form :model="advertisementModel" :label-width="80">
                <div>
                    <label style="padding:0px 16px">时间设置</label><DatePicker type="datetime" placeholder="开始时间"  v-model="advertisementModel.startTime" style="width: 180px"></DatePicker> -
                    <DatePicker type="datetime" placeholder="终止时间"  v-model="advertisementModel.endTime" style="width: 180px"></DatePicker>
                </div>
                <br/>
                <FormItem label="跳转URL" prop="target">
                    <Input v-model="advertisementModel.target" placeholder="请输入跳转URL" />
                </FormItem>
                <br/>
                <div>
                    <label style="padding:0px 16px">图片上传</label>
                    <div class="demo-upload-list" v-for="item in uploadList">
                        <template v-if="item.status === 'finished'">
                            <img :src="item.url">
                            <div class="demo-upload-list-cover">
                                <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                                <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                            </div>
                        </template>
                        <template v-else>
                            <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                        </template>
                    </div>
                    <Upload
                            ref="upload"
                            limit="1"
                            :show-upload-list="false"
                            :default-file-list="defaultList"
                            :on-success="handleSuccess"
                            :format="['jpg','jpeg','png']"
                            :max-size="512"
                            :on-format-error="handleFormatError"
                            :on-exceeded-size="handleMaxSize"
                            :before-upload="handleBeforeUpload"
                            multiple
                            type="drag"
                            action="http://115.28.157.85:9898/upload/wgj/img"
                            style="display: inline-block;width:58px;">
                        <div style="width: 58px;height:58px;line-height: 58px;">
                            <Icon type="camera" size="20"></Icon>
                        </div>
                    </Upload>
                </div>
            </Form>
        </Modal>
        <Modal title="View Image" v-model="visible">
            <img :src=imgName v-if="visible" style="width: 100%">
        </Modal>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                //表头
                slideTableHead:[
                    {
                        title: '编号',
                        align: 'center',
                        key: 'id',
                        "sortable": true,
                    },
                    {
                        title: '跳转地址',
                        align: 'center',
                        key: 'target',
                    },
                    {
                        title:'广告图',
                        width:"100px",
                        align: 'center',
                        className:'imgUrl',
                        render: (h, params) => {
                            const row = params.row;
                            const imgUrl = row.imgUrl;
                            return h('img', {
                                attrs: {
                                    src:imgUrl,
                                },
                                style:{
                                    width:"100px",
                                    height:'70px'
                                }
                            });
                        }
                    },
                    {
                        title: '开始时间',
                        align: 'center',
                        key: 'startTime',
                    },
                    {
                        title: '结束时间',
                        align: 'center',
                        key: 'endTime',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 190,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.upAdvertisement(params.index)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.deAdvertisement(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                selectURl:'/advertisement/selectAdvertisement',
                addOrUpURl:'/advertisement/addOrUpAdvertisement',
                deleteURl:'/advertisement/deleteAdvertisement',
                advertisementList:[],
                tipeNews:'暂无数据',
                advertisementModel:{},
                advertisementVatis:false,
                //图片上传
                defaultList: [],
                imgName: '',
                visible: false,
                uploadList:[],
            }
        },
        created () {
            this.getData();
        },
        methods: {
            //初始化时获取数据
            getData () {
                let self = this;
                self.$axios.get(self.selectURl).then((res) => {
                    self.advertisementList = res.data.data;
                })
            },
            handleSubmit(name){
                let self=this;
                self.advertisementVatis=false;
                self.$axios.post(self.addOrUpURl,self.advertisementModel).then((res) => {
                    if (res.data.code==200){
                        self.$Message.success('恭喜您，广告添加/修改成功');
                        self.getData();
                    }else {
                        self.$Message.error('抱歉，添加/修改失败。请稍后重试!');
                        self.getData();
                    }
                })
            },
            handleReset(name){
                this.advertisementVatis=false;
            },
            upAdvertisement(index){
                let self=this;
                self.defaultList=[];
                self.uploadList=[];
                self.advertisementModel = self.advertisementList[index];
                self.defaultList.push({
                    'name': '',
                    'url': self.advertisementList[index].imgUrl
                });
                self.uploadList.push({
                    'status': 'finished',
                    'url': self.advertisementList[index].imgUrl
                });
                self.advertisementVatis = true;
            },
            deAdvertisement(index){
                let self=this;
                let advertisementDele = self.advertisementList[index];
                self.$axios.post(self.deleteURl+'/'+advertisementDele.id).then((res) => {
                    if (res.data.code==200){
                        self.$Message.success('恭喜您，广告删除成功');
                        self.getData();
                    }else {
                        self.$Message.error('抱歉，删除失败。请稍后重试!');
                        self.getData();
                    }
                })
            },
            addAdvertisement(index){
                let self=this;
                self.defaultList=[];
                self.uploadList=[];
                self.advertisementModel={};
                self.advertisementVatis = true;
            },
            //图片上传

            //看大图
            handleView () {
                this.imgName = this.uploadList[0].url;
                this.visible = true;
            },
            //删除图片
            handleRemove (file) {
                this.uploadList=[];
            },
            //上传成功
            handleSuccess (res, file) {
                let self=this;
                self.advertisementModel.imgUrl = file.response[0].filePath;
                this.defaultList.push({
                    'name': file.name,
                    'url': file.response[0].filePath
                });
                this.uploadList.push({
                    'status': 'finished',
                    'url': file.response[0].filePath
                });
            },
            //上传错误时
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '图片格式不对！！！',
                    desc:  file.name + ' 格式不对。请上传 jpg,jpeg,png格式的。'
                });
            },
            //上传大小超过时
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '图片大小超出',
                    desc: file.name + '这个张图片超过512KB',
                });
            },
            //上传之前
            handleBeforeUpload (file) {
                const check = this.uploadList.length < 1;
                if (!check) {
                    this.$Notice.warning({
                        title: '只能上传一张图标'
                    });
                }
                return check;
            },

        },
        mounted () {
            this.uploadList = this.$refs.upload.fileList;
        }

    }
</script>
<style>
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>